<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仪表详情</title>
    <!-- 引入element样式 -->
<!--    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/theme-chalk/index.css">-->
    <link rel="stylesheet" type="text/css" href="../../static/css/index.css">
    <link rel="stylesheet" type="text/css" href="../../static/css/allCounter.css"></head>
    <link rel="stylesheet" type="text/css" href="../../static/css/details.css">
</head>
<body>
    <div id="app">
        <el-form ref="form" :model="form" label-width="80px" style="margin-top: 30px">
            <p style="text-align: center;">{{form.name}}</p>
            <el-form-item label="上排值: " >
                <el-input v-model="form.upperRow" disabled></el-input>
            </el-form-item>
            <el-form-item label="下排值: ">
                <el-input v-model="form.lowerRow" disabled></el-input>
            </el-form-item>
            <el-form-item >
                <div class="al1Div" >
                    <span class="al1DivP">AL1</span>
                    <button v-if="isShow(form.upperRow, form.al1) == true" class="alDivBtn"></button>
                    <button v-if="isShow(form.upperRow, form.al1) == false" class="alDivBtn1"></button>
                </div>
                <div  style="padding-left: 316px; display: block;float: left;text-align: center;">
                    <span class="al1DivP">AL2</span>
                    <button v-if="isShow(form.lowerRow, form.al2) == true" class="alDivBtn"></button>
                    <button v-if="isShow(form.lowerRow, form.al2) == false" class="alDivBtn1"></button>
                </div>
            </el-form-item>
            <div class="clearFloat"></div>
            <el-form-item >
                <el-button type="success" @click="goSetCounter" plain>设置</el-button>
                <el-button type="warning" plain @click="setSuspend">{{form.suspendBtn}}</el-button>
                <el-button type="info" plain @click="clear(1)">清零1</el-button>
                <el-button type="info" plain  @click="clear(2)">清零2</el-button>
                <el-button type="primary" plain @click="backIndex">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</body>
<!--&lt;!&ndash; 引入组件库 &ndash;&gt;-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>-->
<!--&lt;!&ndash; 引入组件库 &ndash;&gt;-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>-->
<script src="../../static/js/vue.js"></script>
<script src="../../static/js/index.js"></script>
<script src="../../static/js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            form: {
                id:null,
                upperRow:null,
                lowerRow:null,
                clearMode:null,
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
                al1:0,
                al2:0,
                al1IsShow:false,
                al2IsShow:false,
                data:{},
                num:0,
                suspendFlag:0,
                suspendBtn : '暂停'
            }
        },
        mounted: function() {
            var self = this;
            const timer = setInterval(function () {
                self.form.num = self.form.num + 1;
                console.log(self.form.num);
                self.details();
            },3000)
        },
        created:function(){
            var self = this;
            var id = self.getQueryString("id");
            var upperRow = self.getQueryString("upperRow");
            var lowerRow = self.getQueryString("lowerRow");
            var clearMode = self.getQueryString("clearMode");
            var al1 = self.getQueryString("al1");
            var al2 = self.getQueryString("al2");
            var suspendflag = self.getQueryString("suspendFlag");
            var meterName = self.getQueryString("meterName");
            self.form.id = id;
            self.form.upperRow = upperRow;
            self.form.lowerRow = lowerRow;
            self.form.clearMode = clearMode;
            self.form.al1 = al1;
            self.form.al2 = al2;
            self.form.name = decodeURI(meterName);
            self.form.suspendFlag = parseInt(suspendflag);
            if (self.form.suspendFlag == 0) {
                self.form.suspendBtn = "暂停";
            } else {
                self.form.suspendBtn = "恢复";
            }
            if (Number(upperRow) >= Number(al1)) {
                self.form.al1IsShow = true
            }
            if (Number(lowerRow) >= Number(al2)) {
                self.form.al2IsShow = true
            }
        },
        methods: {
            details: function() {
                var self = this;
                axios.post('http://localhost:8032/device/meterDetails',{id: self.form.id,}).then(function (res) {
                    if (res.data.code == true) {
                        console.log(res.data.data.displayUpperRowVal)
                        self.form.upperRow = res.data.data.displayUpperRowVal;
                        self.form.lowerRow = res.data.data.displayLowerRowVal;
                        self.form.clearMode = res.data.data.clearMode;
                        self.form.al1 = res.data.data.displayAlarm1;
                        self.form.al2 = res.data.data.displayAlarm2;
                        self.form.suspendFlag = parseInt(res.data.data.suspendFlag);
                        if (self.form.suspendFlag == 0) {
                            self.form.suspendBtn = "暂停";
                        } else {
                            self.form.suspendBtn = "恢复";
                        }
                        return ;
                    } else {
                        self.$notify.error({
                            title: '温馨提示',
                            message: '计数器信息获取失败'
                        });
                        return ;
                    }
                }).catch(function (error) {
                    self.$notify.error({
                        title: '温馨提示',
                        message: '计数器信息获取失败'
                    });
                })
            },
            isShow:function(val1, val2) {
                if (Number(val1) >= Number(val2)) {
                    return true;
                } else {
                    return false;
                }
            },

            // 获取到url参数的值
            getQueryString: function(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
                var context = "";
                if (r != null)
                    context = r[2];
                reg = null;
                r = null;
                return context == null || context == "" || context == "undefined" ? "" : context;
            },
            goSetCounter:function () {
                var self = this;
                window.location.href = "setCounter.html?id=" + self.form.id;
            },
            setSuspend:function () {
                var self = this;
                var confirmBtn = "暂停";
                if (self.form.suspendFlag == 1) {
                    confirmBtn = '恢复';
                }
                self.$confirm('你确定要' + confirmBtn + '仪表吗?', '温馨提示',{
                    confirmButtonText: confirmBtn,
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    // 发送请求 设置暂停
                    axios.post('http://localhost:8032/device/suspend',{
                        id: self.form.id,
                        suspendFlag:self.form.suspendFlag
                    }).then(function (res) {
                        if (res.data.code == true) {
                            var resMsg = "";
                            if (self.form.suspendFlag == 0) {
                                resMsg = '计数器暂停成功!';
                                self.form.suspendFlag = 1;
                                self.form.suspendBtn = "恢复";
                            } else {
                                resMsg = '计数器恢复成功!';
                                self.form.suspendFlag = 0;
                                self.form.suspendBtn = "暂停";
                            }

                            self.$message({
                                type: 'success',
                                message: resMsg
                            })
                            setTimeout(function () {
                                window.location.href = "allCounter.html";
                            },2000)
                            return ;
                        } else {
                            var resMsg = "";
                            if (self.form.suspendFlag == 0) {
                                resMsg = '计数器暂停失败!';
                            } else {
                                resMsg = '计数器恢复失败!';
                            }
                            self.$notify.error({
                                title: '温馨提示',
                                message: resMsg
                            });
                            return ;
                        }
                    }).catch(function (error) {
                        console.log(error);
                    })
                }).catch(function (reason) {
                    var resMsg = "";
                    if (self.form.suspendFlag == 0) {
                        resMsg = '已取消暂停!';
                    } else {
                        resMsg = '已取消恢复!';
                    }
                    self.$message({
                        type: 'info',
                        message: resMsg
                    })
                })

            },
            clear:function (val) {
                var self = this;
                var id = self.form.id;
                var clearMode = self.form.clearMode;
                console.log(clearMode)
                if (Number(val) == 2) {
                    if (Number(clearMode) == 2) {
                        self.$notify.error({
                            title: '温馨提示',
                            message: '该仪表未开启双清零模式'
                        });
                        return ;
                    }
                }
                self.$confirm('你确定要清零?', '温馨提示',{
                    confirmButtonText: '清零',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    // 发送请求 设置暂停
                    axios.post('http://localhost:8032/device/clear',{id: id, flag: val}).then(function (res) {
                        if (res.data.code == true) {
                            self.$message({
                                type: 'success',
                                message: '计数器上排清零成功!'
                            })
                            setTimeout(function () {
                                window.location.href = "allCounter.html";
                            },2000)
                            return ;
                        } else {
                            self.$notify.error({
                                title: '温馨提示',
                                message: '计数器上排清零失败'
                            });
                            return ;
                        }
                    }).catch(function (error) {
                        console.log(error);
                    })
                }).catch(function (reason) {
                    self.$message({
                        type: 'info',
                        message: '已取消清零'
                    })
                })
            },
            backIndex:function () {
                window.location.href = "allCounter.html";
            }
        }
    })
</script>
</html>